<template>
  <div>
    <a-menu
      style="width: 200px height:100px"
      :default-selected-keys="['0']"
      mode="inline"
      @click="handleClick"
    >
      <a-menu-item key="0" style="font-size: 16px">全部职务</a-menu-item>
      <a-menu-item-group key="g1">
        <template slot="title"> <span>后端开发</span> </template>
        <a-sub-menu key="sub1" mode="vertical" @click="handleClick">
          <span slot="title"><span>Java Php C</span></span>
          <a-menu-item key="1" style="height: 180px">
            <!--card组件-->
            <!-- <a-card title="后端开发">
              <a-card-grid style="width: 25%; text-align: center"> Java </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> C++ </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> PHP </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> C# </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> .NET </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> Python </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> Node.js </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> ASP </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> VB </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> Perl </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> Ruby </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> Go </a-card-grid>
            </a-card> -->

            <a-card>
              <div>
                <a href="#" style="font-size=16px">后端开发</a>
                <a-divider type="vertical" />
                <br />
              </div>
              <a href="http://localhost:8080/start">企业</a>
              <a-divider type="vertical" />
              <a href="http://localhost:8080/login/nav">个人</a>
              <a-divider type="vertical" />
              <a href="http://localhost:8080/cybe">公司</a>
              <a-divider type="vertical" />
              <a href="http://localhost:8080/zj">专家</a>
              <a-divider type="vertical" />
              .NET
              <a-divider type="vertical" />
              Python
              <a-divider type="vertical" />
              Node.js
              <a-divider type="vertical" />
              ASP
              <a-divider type="vertical" />
              VB
              <a-divider type="vertical" />
              Perl
              <a-divider type="vertical" />
              Ruby
              <a-divider type="vertical" />
              Go
              <a-divider type="vertical" />
            </a-card>
            <a-card>
              <div>
                <a href="#" style="font-size=16px">后端开发</a>
                <a-divider type="vertical" />
                <br />
              </div>
              <a href="#">Java</a>
              <a-divider type="vertical" />
              <a href="#">C++</a>
              <a-divider type="vertical" />
              <a href="#">PHP</a>
              <a-divider type="vertical" />
              C#
              <a-divider type="vertical" />
              .NET
              <a-divider type="vertical" />
              Python
              <a-divider type="vertical" />
              Node.js
              <a-divider type="vertical" />
              ASP
              <a-divider type="vertical" />
              VB
              <a-divider type="vertical" />
              Perl
              <a-divider type="vertical" />
              Ruby
              <a-divider type="vertical" />
              Go
              <a-divider type="vertical" />
            </a-card>
          </a-menu-item>
        </a-sub-menu>
      </a-menu-item-group>
      <a-menu-item-group key="g2">
        <template slot="title"> <span>移动开发</span> </template>
        <a-sub-menu key="sub2" mode="vertical" @click="handleClick">
          <span slot="title"><span>Html5 Android IOS</span></span>
          <a-menu-item key="2" style="height: 90px; width: 800px">
            <a-card>
              <div>
                <a href="#" style="font-size=16px">移动开发</a>
                <a-divider type="vertical" />
                <br />
              </div>
              <a href="#">HTML5</a>
              <a-divider type="vertical" />
              <a href="#">Android</a>
              <a-divider type="vertical" />
              <a href="#">IOS</a>
              <a-divider type="vertical" />
              WP
              <a-divider type="vertical" />
              移动开发其它
              <a-divider type="vertical" />
            </a-card>
          </a-menu-item>
        </a-sub-menu>
      </a-menu-item-group>
      <a-menu-item-group key="g3">
        <template slot="title"> <span>前端开发</span> </template>
        <a-sub-menu key="sub3" mode="vertical" @click="handleClick">
          <span slot="title"><span>Html Web前端 JS</span></span>
          <a-menu-item key="3" style="height: 120px; width: 800px">
            <a-card>
              <!-- <a-card-grid style="width: 25%; text-align: center"> Web前端 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> Flash </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> html5 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center">
                JavaScript
              </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> U3D </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center">
                COCOS2D-X
              </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center">
                前端开发其它
              </a-card-grid> -->
              <div>
                <a href="#" style="font-size=16px">移动开发</a>
                <a-divider type="vertical" />
                <br />
              </div>
              <a href="#">Web前端</a>
              <a-divider type="vertical" />
              <a href="#">Flash</a>
              <a-divider type="vertical" />
              <a href="#">html5</a>
              <a-divider type="vertical" />
              JavaScript
              <a-divider type="vertical" />
              U3D
              <a-divider type="vertical" />
              COCOS2D-X
              <a-divider type="vertical" />
              前端开发其它
              <a-divider type="vertical" />
            </a-card>
          </a-menu-item>
        </a-sub-menu>
      </a-menu-item-group>
      <a-menu-item-group key="g4">
        <template slot="title"> <span>硬件开发</span> </template>
        <a-sub-menu key="sub4" mode="vertical" @click="handleClick">
          <span slot="title"><span>嵌入式......</span></span>
          <a-menu-item key="4" style="height: 112px; width: 800px">
            <a-card>
              <div>
                <a href="#" style="font-size=16px">硬件开发</a>
                <a-divider type="vertical" />
                <br />
              </div>
              <a href="#">硬件</a>
              <a-divider type="vertical" />
              <a href="#">嵌入式</a>
              <a-divider type="vertical" />
              <a href="#">自动化</a>
              <a-divider type="vertical" />
              单片机
              <a-divider type="vertical" />
              电路设计
              <a-divider type="vertical" />
              驱动开发
              <a-divider type="vertical" />
              系统集成
              <a-divider type="vertical" />
              FPGA开发
              <a-divider type="vertical" />
              
              DSP开发
              <a-divider type="vertical" />
              ARM开发
              <a-divider type="vertical" />
              <br>
              PCB工艺
              <a-divider type="vertical" />
              模具设计
              <a-divider type="vertical" />
              热传导
              <a-divider type="vertical" />
              材料工程师
              <a-divider type="vertical" />
              精益工程师
              <a-divider type="vertical" />
              射频工程师
              <a-divider type="vertical" />
              硬件开发其它
              <a-divider type="vertical" />
              <!-- <a-card-grid style="width: 25%; text-align: center"> 硬件 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 嵌入式 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 自动化 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 单片机 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 电路设计 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 驱动开发 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 系统集成 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> FPGA开发 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> DSP开发 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> ARM开发 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> PCB工艺 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 模具设计 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 热传导 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center">
                材料工程师
              </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center">
                精益工程师
              </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center">
                射频工程师
              </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center">
                硬件开发其它
              </a-card-grid> -->
            </a-card>
          </a-menu-item>
        </a-sub-menu>
      </a-menu-item-group>
      <a-menu-item-group key="g5">
        <template slot="title"> <span>测试</span> </template>
        <a-sub-menu key="sub5" mode="vertical" @click="handleClick">
          <span slot="title"><span>测试工程师......</span></span>
          <a-menu-item key="5" style="height: 112px; width: 800px">
            <a-card >
              <div>
                <a href="#" style="font-size=16px">测试</a>
                <a-divider type="vertical" />
                <br />
              </div>
              <a href="#">测试工程师</a>
              <a-divider type="vertical" />
              <a href="#">自动化测试</a>
              <a-divider type="vertical" />
              <a href="#">功能测试</a>
              <a-divider type="vertical" />
              性能测试
              <a-divider type="vertical" />
              测试开发
              <a-divider type="vertical" />
              游戏测试
              <a-divider type="vertical" />
              白盒测试
              <a-divider type="vertical" />
              灰盒测试
              <a-divider type="vertical" />
              <br>

              黑盒测试
              <a-divider type="vertical" />
              手机测试
              <a-divider type="vertical" />
              
              硬件测试
              <a-divider type="vertical" />
              测试其它 
              <a-divider type="vertical" />
              
              <!-- <a-card-grid style="width: 25%; text-align: center">
                测试工程师
              </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center">
                自动化测试
              </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 功能测试 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 性能测试 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 测试开发 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 游戏测试</a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 白盒测试 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 灰盒测试 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 黑盒测试 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 手机测试 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 硬件测试 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 测试其它 </a-card-grid> -->
            </a-card>
          </a-menu-item>
        </a-sub-menu>
      </a-menu-item-group>
      <a-menu-item-group key="g6">
        <template slot="title"> <span>运维</span> </template>
        <a-sub-menu key="sub6" mode="vertical" @click="handleClick">
          <span slot="title"><span>运维工程师......</span></span>
          <a-menu-item key="6" style="height: 112px; width: 800px">
            <a-card >
              <!-- <a-card-grid style="width: 25%; text-align: center">
                运维工程师工程师
              </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center">
                运维开发工程师
              </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center">
                网络工程师
              </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center">
                系统工程师
              </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> IT支持 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> IDC</a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> CDN </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> F5 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center">
                系统管理员
              </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 病毒分析 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> WEB安全 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 网络安全 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 系统安全</a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 运维经理 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 运维其它 </a-card-grid> -->
              <div>
                <a href="#" style="font-size=16px">运维</a>
                <a-divider type="vertical" />
                <br />
              </div>
              <a href="#">运维工程师</a>
              <a-divider type="vertical" />
              <a href="#">运维开发工程师</a>
              <a-divider type="vertical" />
              网络工程师
              <a-divider type="vertical" />
              <a href="#">系统工程师</a>
              <a-divider type="vertical" />
              IT支持
              <a-divider type="vertical" />
              IDC
              <a-divider type="vertical" />
              CDN
              <a-divider type="vertical" />
              F5
              <a-divider type="vertical" />
              病毒分析
              <a-divider type="vertical" />
              <br>

              WEB安全
              <a-divider type="vertical" />
              网络安全
              <a-divider type="vertical" />
              
              系统安全
              <a-divider type="vertical" />
              运维经理 
              <a-divider type="vertical" />
              运维其它
              <a-divider type="vertical" />
            </a-card>
          </a-menu-item>
        </a-sub-menu>
      </a-menu-item-group>
      <a-menu-item-group key="g7">
        <template slot="title"> <span>DBA</span> </template>
        <a-sub-menu key="sub7" mode="vertical" @click="handleClick">
          <span slot="title"><span>MySql......</span></span>
          <a-menu-item key="7" style="height: 265px; width: 800px">
            <!--card组件-->
            <a-card >
              <!-- <a-card-grid style="width: 25%; text-align: center"> Mysql </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> SQLServe </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> Oracle </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> DB2 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> MongoDB </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> ETL </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> Hive </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 数据仓库 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> DBA其它 </a-card-grid> -->
               <div>
                <a href="#" style="font-size=16px">DBA</a>
                <a-divider type="vertical" />
                <br />
              </div>
              <a href="#">Mysql</a>
              <a-divider type="vertical" />
              <a href="#">SQLServe</a>
              <a-divider type="vertical" />
              Oracle
              <a-divider type="vertical" />
              <a href="#"> DB2</a>
              <a-divider type="vertical" />
              MongoDB
              <a-divider type="vertical" />
              ETL
              <a-divider type="vertical" />
              CDN
              <a-divider type="vertical" />
              Hive
              <a-divider type="vertical" />
              数据仓库
              <a-divider type="vertical" />
              <br>

              DBA其它
              <a-divider type="vertical" />
            </a-card>
          </a-menu-item>
        </a-sub-menu>
      </a-menu-item-group>
      <a-menu-item-group key="g8">
        <template slot="title"> <span>企业软件</span> </template>
        <a-sub-menu key="sub8" mode="vertical" @click="handleClick">
          <span slot="title"><span>售前......</span></span>
          <a-menu-item key="8" style="height: 196px; width: 800px">
            <!--card组件-->
            <a-card >
              <!-- <a-card-grid style="width: 25%; text-align: center">
                实施工程师
              </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center">
                售前工程师
              </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center">
                售后工程师
              </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> BI工程师 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center">
                企业软件其它
              </a-card-grid> -->
               <div>
                <a href="#" style="font-size=16px">企业软件</a>
                <a-divider type="vertical" />
                <br />
              </div>
              <a href="#">实施工程师</a>
              <a-divider type="vertical" />
              <a href="#">售前工程师</a>
              <a-divider type="vertical" />
              售后工程师
              <a-divider type="vertical" />
              <a href="#">  BI工程师</a>
              <a-divider type="vertical" />
              企业软件其它
              <a-divider type="vertical" />
            </a-card>
          </a-menu-item>
        </a-sub-menu>
      </a-menu-item-group>
      <a-menu-item-group key="g9">
        <template slot="title"> <span>项目管理</span> </template>
        <a-sub-menu key="sub9" mode="vertical" @click="handleClick">
          <span slot="title"><span>项目经理......</span></span>
          <a-menu-item key="9" style="height: 127px; width: 800px">
            <!--card组件-->
            <a-card title="项目管理">
              <!-- <a-card-grid style="width: 25%; text-align: center"> 项目经理 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 项目助理 </a-card-grid> -->
              <div>
                <a href="#" style="font-size=16px">项目管理</a>
                <a-divider type="vertical" />
                <br />
              </div>
              <a href="#">项目经理</a>
              <a-divider type="vertical" />
              <a href="#">项目助理</a>
              <a-divider type="vertical" />
            </a-card>
          </a-menu-item>
        </a-sub-menu>
      </a-menu-item-group>
      <a-menu-item-group key="g10">
        <template slot="title"> <span>高端职位</span> </template>
        <a-sub-menu key="sub10" mode="vertical" @click="handleClick">
          <span slot="title"><span>技术总监......</span></span>
          <a-menu-item key="10" style="height: 265px; width: 800px">
            <!--card组件-->
            <a-card title="企业软件">
              <!-- <a-card-grid style="width: 25%; text-align: center"> 技术总监 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 技术经理 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 架构师 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> CTO </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 运维总监 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center">
                技术合伙人
              </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 项目总监 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 测试总监 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center"> 安全专家 </a-card-grid>
              <a-card-grid style="width: 25%; text-align: center">
                高端职位其它
              </a-card-grid> -->
              <div>
                <a href="#" style="font-size=16px">企业软件</a>
                <a-divider type="vertical" />
                <br />
              </div>
              <a href="#">技术总监</a>
              <a-divider type="vertical" />
              <a href="#">技术经理</a>
              <a-divider type="vertical" />
              架构师
               <a-divider type="vertical" />
              运维总监
               <a-divider type="vertical" /><br>
              CTO
               <a-divider type="vertical" />
              技术合伙人
               <a-divider type="vertical" />
              项目总监
               <a-divider type="vertical" />
              测试总监
               <a-divider type="vertical" />
              安全专家
               <a-divider type="vertical" />
            </a-card>
          </a-menu-item>
        </a-sub-menu>
      </a-menu-item-group>
    </a-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: ["mail"],
      openKeys: ["sub1"],
    };
  },
  watch: {
    openKeys(val) {
      console.log("openKeys", val);
    },
  },
  methods: {
    handleClick(e) {
      console.log("click", e);
    },
    titleClick(e) {
      console.log("titleClick", e);
    },
  },
};
</script>
<style scoped>
li.ant-menu-item-group {
  height: 72px;
}
.ant-menu-item-group-title {
  padding: 0px 16px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 1.5;
  transition: all 0.3s;
}
.el-menu-item {
  color: #777f8f;
}
.el-menu-item.is-active {
  color: #6681fa;
  background-color: #eaeeff;
}
</style>
